<template>
    <div class="trending-weaponry">
        <div class="center-title">
            <img class="title_background"
                src="https://img.zcool.cn/community/01944559ddd70ba80121ae0ccfac1e.jpg@1280w_1l_2o_100sh.jpg" />
            <img srcset="../../static/image/icon_title.png" class="title_icon" />
            <span>趋势武器</span>
        </div>
        <div class="loading" v-if="pageStat">
            <Loading></Loading>
        </div>
        <div class="content" v-for="weaponCard in weaponCards" :key="weaponCard.id"
            @click="selectWeapon(weaponCard.linkId)">
            <img :src="weaponCard.weaponImg" class="weapon-card__background">
            <div class="weapon-card__content">
                <div class="weapon-card_info">
                    <div class="weapon-card__title">{{weaponCard.weaponTitle}}</div>
                    <div class="weapon-card__name">{{weaponCard.weaponName}}</div>
                    <div class="weapon-card__type">{{weaponCard.weaponType}}</div>
                </div>

                <div class="weapon-card__stat">
                    <div class="weapon-card__stat_info">
                        <span>Usage</span>
                        <span>{{weaponCard.stats[0]}}</span>
                        <van-progress :percentage="100" stroke-width="11" pivot-text="" class="progress" />
                    </div>
                    <div class="weapon-card__stat_info">
                        <span>Kills</span>
                        <span>{{weaponCard.stats[1]}}</span>
                        <van-progress :percentage="100" stroke-width="11" pivot-text="" color="#ee0a24"
                            class="progress" />
                    </div>
                    <div class="weapon-card__stat_info">
                        <span>Headshots</span>
                        <span>{{weaponCard.stats[2]}}</span>
                        <van-progress :percentage="100" stroke-width="11" pivot-text="" color="#fdae61"
                            class="progress" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import Loading from '@/components/loading/Loading.vue'

    export default {
        data() {
            return {
                weaponCards: [],
                pageStat: true

            }
        },
        components: {
            Loading
        },
        created() {
            this.getWeaponCard();
        },
        methods: {
            getWeaponCard() {
                axios.get("api/getWeaponCard")
                    .then(res => {
                        this.weaponCards = res.data
                        this.$nextTick(() => {
                            this.pageStat = false
                        })
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            selectWeapon(linkId) {
                console.log(linkId)
                var id = linkId
                this.$router.push({
                    name: "WeaponInfo",
                    params: {
                        id
                    },
                });
            }
        }
    }
</script>

<style scoped>
    .center-title {
        position: relative;
        height: 100px;
        width: 100%;
        overflow: hidden;
        margin-bottom: 5px;
    }

    .title_background {
        width: 100%;
    }

    .title_icon {
        position: absolute;
        top: 40px;
        left: 10px;
        width: 40px;
        height: 35px;

    }

    .center-title span {
        position: absolute;
        top: 35px;
        left: 55px;
        color: white;
        font-weight: bold;
        font-size: 30px;

    }

    .weapon-card__background {
        width: 100%;
    }

    .content {
        position: relative;
        width: 100%;
        height: 180px;
        overflow: hidden;

    }


    .weapon-card__content {
        width: 100%;
        padding-top: 10px;
    }

    .weapon-card_info {
        padding-left: 10px;
    }

    .weapon-card__title {
        font-size: 20px;
        color: #bfb059;
    }

    .weapon-card__name {
        font-size: 30px;
        font-weight: bold;
        color: white;
    }

    .weapon-card__type {
        font-size: 15px;
        color: #cccccc;
    }


    .weapon-card__content {
        position: absolute;
        top: 0;
        left: 0;
    }

    .weapon-card__stat {
        margin: 15px 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .weapon-card__stat_info>.progress {
        width: 100px;
    }

    .weapon-card__stat_info>span {
        font-size: 20px;
        font-weight: bold;
        color: white;
    }

    .loading {
        height: 200px;
        overflow: hidden;
    }

    span {
        word-break: normal;
        width: auto;
        display: block;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow: hidden;
    }
</style>